<template>
  <div class="HomeMain">
    <!--轮播-->
    <div class="carousel">
      <el-carousel :interval="2000"  indicator-position="outside" height="700px">
        <el-carousel-item v-for="item in nOutside" :key="item">
<!--    type="card"    interval  <img :src="item" alt="">-->
<!--          <h3>{{ item }}</h3>-->
          <el-image fit="fill" :src="item" style="height: 100%;width: 100%;">
<!--            fill / contain / cover / none / scale-down  referrer-policy-->
            <div class="image-slot" slot="error">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </el-carousel-item>
      </el-carousel>
<!--      <img :src="nOutside[0]" alt="">-->
    </div>
    <!--轮播-->


    <!--主要内容-->
    <el-row class="main_content">
      <!-- 上半部分-->
      <el-row type="flex" justify="center" class="upper_half">
        <!--热门比赛-->
        <el-col :xs="23" :sm="23" :md="12" :lg="12" class="upper_half_left">
        <!--title-->
          <el-row class="left_title">
            <el-col  :xs="16" :sm="18" :md="18" :lg="18">
              <h1>热门比赛</h1>
            </el-col>
            <el-col  :xs="8" :sm="6" :md="6" :lg="6" class="left_title_right">
              <el-link href="/information/competitionList" class="left_title_more" :underline="false">更多<i class="el-icon--right el-icon-arrow-right"></i></el-link>
            </el-col>
          </el-row>
        <!--title-->
           <!--热门比赛展示部分-->
          <el-row class="left_main">
            <el-row class="left_main_list" v-for="item of hotGames" :key="item.gameID">
              <div class="left_main_image">
<!--            https://img.tuguaishou.com/ips_templ_preview/73/8c/1a/lg_1816337_1576726401_5dfaef81a188e.jpg!w1024_w?auth_key=2222630483-0-0-83ebfad84453420585f1bb91cf46d238    -->
                <el-image @click="gameGo(item)" fit="fill" :src="item.gameImages">
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </el-image>
              </div>
              <!-- 详细介绍-->
<!--              :xs="5" :sm="7" :md="7" :lg="10"-->
              <el-col :xs="5" :sm="7" :md="7" :lg="10" class="left_main_text">
                <div class="text_one" >
                  <el-button @click="gameGo(item)" type="text">{{item.gameName}}</el-button>
                </div>
                <div class="text_two">
                  <span>赛事级别：</span>
                  <span>{{item.gamelevel}}</span>
                </div>
                <div class="text-tree">
                  <span>参赛方式：</span>
                  <span>{{item.type}}</span>
                </div>
                <div class="text-four">
<!--             style="padding: 2px 0"    style="font-weight: 800;display: inline-block"-->
                  <span >赛事时间：</span>
                  <span>{{item.beginTime + '~' + item.endTime}}</span>
                </div>
                <div class="text-five">
                  <span>报名时间：</span>
                  <span>{{item.signendTime + '~' + item.signupTime}}</span>
                </div>
              </el-col>
              <!--赛事方向-->
              <el-col :xs="6" :sm="6" :md="4" :lg="5" class="left_main_right">
<!--                <div class="text_right" style="padding: 10px 0">-->
<!--                  <span style="font-weight: 800;display: inline-block">赛事方向：</span>-->
<!--                  <div style="display: inline-block; border: 1px solid #f8a443;border-radius: 30px;color: #f8a443;padding: 3px 4px">-->
<!--                    <span v-for="temp of item.direction" :key="temp">{{' '+temp}}</span></div>-->
<!--                </div>-->
                <div class="text_right" style="padding: 10px 0">
                  <span style="font-weight: 800;display: inline">赛事方向：</span>
                  <!--                     盒子圆角边框，不好看，取消掉了：border: 1px solid #f8a443;border-radius: 30px;-->
                  <div style="display: inline;color: #f8a443;padding: 3px 4px">
                    <span v-for="temp of item.direction" :key="temp">{{' '+temp}}</span></div>
                </div>
              </el-col>
            </el-row>
          </el-row>
          <!--热门比赛展示部分-->
        </el-col>
        <!--热门比赛-->

        <!--公告栏-->
        <el-col :xs="7" :sm="7" :md="6" :lg="6" class="upper_half_right hidden-sm-and-down">
          <div class="right_issue" @click="handleAnnouncement">
            <span>赛事公告</span>
          </div>

          <!--公告栏主要内容-->
          <div class="announcement_list">
            <div class="announcement" @click="handleAnnouncementList(item)" v-for="(item,index) in announcement" :key="index">
              <div class="announcement_time_box">
                <div class="announcement_time">
                  <span style="display: block;font-size: 25px;font-weight: 10;color: #2d2d2d">{{item.dayTime}}</span>
                  <div style="border-bottom: 1px solid #737070;margin: 2px 7px;"></div>
                  <span style="display: block;font-size: 15px;font-weight: 3;color: #2d2d2d">{{ item.otherTime }}</span>
                </div>
              </div>
              <div class="announcement_text">
                <span>{{item.title}}</span>
              </div>
            </div>
          </div>
          <!--公告栏主要内容-->

        </el-col>
        <!--公告栏-->
      </el-row>
      <!-- 上半部分-->

      <!--下半部分-->

      <el-row type="flex" justify="center" class="half_bottom">


        <!--赛事动态-->
        <el-col :xs="23" :sm="23" :md="18" :lg="18" :xl="18" class="Events">
          <div class="Events_title">
            <div class="Events_title_left">
              <h1>赛事动态</h1>
            </div>
            <div class="Events_title_right">
              <el-link href="/information/EventDynamics" :underline="false">更多<i class="el-icon--right el-icon-arrow-right"></i></el-link>
            </div>
          </div>
          <div class="Events_list" v-for="item of EventDynamics" :key="item.id">
            <div class="list_img">
              <el-image fit="fill" :src="item.images" clss="image">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
            <el-col :xs="13" :sm="15" :md="15" :lg="17" :xl="22" class="Events_list_text">
              <div class="list_text_title">
                <div class="text_title">
                  <div class="title_one" @click="goText(item.id)"><a href="/information/DynamicArticles">{{item.title}}</a></div>
                  <div class="title_time">{{item.applyTime}}</div>
                </div>
              </div>
              <div class="list_text_main">
                <span>{{item.summary}}</span>
              </div>
            </el-col>
          </div>

        </el-col>
        <!--赛事动态-->
      </el-row>

      <!--下半部分-->


    </el-row>
    <!--主要内容-->

  </div>
</template>

<script>
import outside01 from '@/imgs/outside/1.png';
import outside02 from '@/imgs/outside/2.png';
import outside03 from '@/imgs/outside/3.png';
import outside04 from '@/imgs/outside/4.png';
import outside05 from '@/imgs/outside/5.png';
import outside06 from '@/imgs/outside/6.png';
export default {
  name: "HomeMain",
  data() {
    return{
      hotGames: [], // 热门比赛
      nOutside: [outside01,outside02,outside03,outside04,outside05,outside06], // 轮播
      activeName: 'first',
      EventDynamics: [], // 赛事动态
      announcement: [] // 通知公告
    }
  },
  methods: {
    handleEvents(tab, event){
      console.log(tab, event);
    },

  //  获取公告和赛事动态
    async GetAriticle(){
      const data1 = {};
      const data2 = {};
      data1.classification = '通知公告';
      data2.classification = '赛事动态';
      data1.pages = data2.pages =  '1';
      data1.number = data2.number = '5';
      const Announcement = await this.$api.getAriticle(data1);//data1
      const eventDynamics = await this.$api.getAriticle(data2);//data2
      Announcement.data.page.records.forEach(temp =>{
        temp.dayTime = temp.applyTime.substr(8,temp.applyTime.length);
        temp.otherTime = temp.applyTime.substr(0,7);
      })
      this.announcement = Announcement.data.page.records;
      this.EventDynamics = eventDynamics.data.page.records;
    },
  //  去文章页面，这里先存一下id
    goText(id){
      window.sessionStorage.setItem('TextID',id);
    },

  //  公告点击事件
    handleAnnouncement() {
      this.$router.push('/information/announcement')
    },
    handleAnnouncementList(key){
      this.activeName === key;
      window.sessionStorage.setItem('TextID',key.id)
      this.$router.push('/information/announcementArticles')
    },

    gameGo(item){
      let game = JSON.stringify(item.gameID)
      window.sessionStorage.setItem("gameID",game)
      this.$router.push('/information/gamesDetails')
    }
  },
  mounted() {
    const data = '1';
    this.$api.HomeGames(data)
      .then(res =>{
        // console.log('获取比赛时返回的信息',res);
        let data = [...res.data.page.records];
        data.forEach(temp => {
          const a = temp.direction;
          const gamedirection = JSON.parse(a);
          delete temp.direction;
          temp.direction = gamedirection;
        })
        this.hotGames = data;
      });
    this.GetAriticle();
  }
}
</script>

<style lang="less" scoped>
.carousel{
  margin: 40px auto;
}
.main_content{
  //height: 1000px;
  //上半部分
  .upper_half{
    //height: 500px;
    .upper_half_left{
      background-color: #ffffff;
      min-width: 400px;
      padding: 0 20px;
      .left_title{
        //line-height: 20px;
        .left_title_right{
          line-height: 72px;
          .left_title_more{
            float: right;
          }
        }
      }
      .left_main{
        .left_main_list{
          height: 200px;
          //overflow: hidden;
          border-top: 1px solid #cbc5c5;
          //min-width: 650px;

          //background-color: #909399;
          .left_main_image{
            display: inline-block;
            float: left;
            //background-color: #f85f25;
            width: 230px;
            height: 100%;
            box-sizing: border-box;
            padding: 12.5px 9px;
            overflow: hidden;
          }
          .left_main_text{
            //background-color: aqua;
            height: 100%;
            padding-left: 20px;
            //min-width: 165px;
            .text_one{
              //display: flex;
              //flex-wrap: wrap;
              //justify-content: space-between;
              //.text_right{
                //position: absolute;
              //  width: 150px;
              //}
              ::v-deep .el-button--text{
                padding: 10px 0;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                width: 21em;
                font-weight: 900;
                font-size: 1.3em;
                color: #000509;
                span{
                  float: left;
                }
              }
              ::v-deep .el-button--text:hover{
                color: #409EFF;
              }
            }
            .text_two, .text-tree, .text-four, .text-five{
              padding: 2px 0;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              width: 280px;
              //display: inline-block
            }
          }
          .left_main_right{
            //background-color: aquamarine;
            float: right;
            height: 100%;
            padding-top: 20px;
            //min-width: 85px;
          }
        }
      }
    }
    .upper_half_right{
      background-color: #ffffff;
      .right_issue{
        height: 80px;
        margin: 0 20px;
        background-color: #02407e;
        color: #ffffff;
        font-size: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .announcement_list{
        //height: 100px;
        border: 1px solid #f0efef;
        margin: 30px 20px;
        .announcement{
          position: relative;
          border-bottom: 1px dashed #dedddd;
          margin: 0 15px;
          padding: 10px 0;
          .announcement_time_box{
            display: inline-block;
            width: 70px;
            height: 70px;
            background-color: #f3f1f1;
            border-radius: 50%;
            //box-sizing: content-box;
            margin-bottom: 10px;
            .announcement_time{
              //line-height: 80px;
              //all: initial;
              box-sizing: border-box;
              padding: 4px 0;
              text-align: center;
            }
          }
          .announcement_text{
            //background-color: #02407e;
            //float: bottom;
            height: 70px;
            position: absolute;
            left: 80px;
            bottom: 10px;
            padding-left: 10px;
            //overflow: hidden;
          }
        }

      }
    }
  }
  //上半部分

  //下半部分
  .half_bottom{
    //height: 1000px;
    .Events{
      background-color: #ffffff;
      //height: 100px;
      padding: 20px;
      .Events_title{
        font-weight: 502;
        //border-bottom: 1px solid #909399;
        display: flex;
        justify-content: space-between;
        .Events_title_right{
          line-height: 72px;
        }
      }
      .Events_list{
        border-top: 1px solid #909399;
        padding: 20px 10px;
        display: flex;
        .list_img{
          width: 220px;
          min-width: 220px;
          height: 160px;
          .image{
            width: 100%;
            height: 100%;
          }
        }
        .Events_list_text{
          //width: 100%;
          padding: 0 20px;
          .list_text_title{
            .text_title{
              display: flex;
              justify-content: space-between;
              .title_one{
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                width: 60%;
                font-size: 20px;
                font-weight: 500.5;
                &.title_one a{
                  text-decoration: none;
                  color: #000509;
                }
                &.title_one a:hover{
                  color: #409EFF;
                }
              }
              .title_time{
                line-height: 33px;
              }
            }
          }
          .list_text_main{
            margin: 10px 0;
            font-size: 1.1em;
            text-indent: 2em;
            letter-spacing: 2px;
            line-height: 25px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
          }
        }
      }
    }
  }
  //下半部分
}
</style>
